<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            @query="queryList"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
        >
            <view class="scrollViews">
                <view>
                    <view
												@click="to_lookUserChicken(item)"
                        class="item flex_wrap flex_column"
                        v-for="(item, index) in dataList"
                        :key="index"
                        :style="{
                            background:
                                item.status == 2
                                    ? 'linear-gradient(270deg, rgba(239,251,247,0)  0%, #EAFFF8 100%);'
                                    : 'linear-gradient(270deg, rgba(239,251,247,0) 0%, #FFF2E5 100%);',
                        }"
                    >
                        <view>
                            <view class="topMessage flex_wrap row_between">
                                <view class="flex_wrap row_middle">
                                    <u-image
                                        :src="
                                            item.status == 2
                                                ? require('../static/img/order/greenpeo.png')
                                                : require('../static/img/order/orpeo.png')
                                        "
                                        width="100rpx"
                                        height="100rpx"
                                    />
                                    <view style="margin-left: 20rpx">
										<view>
											<text class="userName">{{item.relation_user_name || '-'}}</text>
											<text>{{item.relation_user_account || ''}}</text>
										</view>
                                       <!-- <u-text
                                            :text="item.relation_user_name+item.relation_user_account || '-'"
                                            color="#333"
                                            bold
                                            size="40rpx"
                                        /> -->
                                        <u-gap height="10rpx" />
										<u-text
										     :text="'领取：'+item.id+'号小鸡'"
										     color="#333"
										     size="24rpx"
										 />
                                    </view>
                                </view>
                                <view
                                    style="margin-top: 20rpx; text-align: right"
                                >
                                    <view
                                        class="statusBg"
                                        :style="{
                                            backgroundImage:
                                                item.status == 2
                                                    ? `url(${require('../static/img/order/green.png')})`
                                                    : `url(${require('../static/img/order/orgeng.png')})`,
                                        }"
                                        >{{ statusMap[item.status] }}</view
                                    >
                                    <u-text
                                        :text="`${item.number} 份`"
                                        size="26rpx"
                                        color="#333"
                                        align="right"
                                        lineHeight="90rpx"
                                    />
                                </view>
                            </view>
                            <view class="bottomMessage flex_wrap row_between">
                                <view class="timeBox"
                                    ><u-text
                                        :text="`领取时间: ${item.confirm_time || ''}`"
                                        size="26rpx"
                                        color="#333"
                                        mode="phone"
                                /></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { chickUrl } from "@/config/tendIdConfig.js";
export default {
    data() {
        return {
            dataList: [],
            statusMap: {
                1: "未领取",
                2: "已领取",
            },
			
			token:''
        };
    },
    onLoad(options) {
        this.token = options.token
		console.log(this.token )
        uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#4992FA",
            animation: {
                duration: 500,
            },
        });
    },
    methods: {
			to_lookUserChicken(item){
				if(item.status == 2){
					uni.navigateTo({
					    url:'/pages_my/user_manage/chickenList/index?customerPhone=' + item.relation_user_account +'&nickName=' + item.relation_user_name
					});
				}
			},
			
        async queryList(pageNo, pageSize) {
			const that = this;
			uni.request({
			   url: chickUrl + '/api/v1/chick/user-chick-transfer-log',
			    method: "GET",
				header: {
					Authorization: `Bearer ${that.token}`,
				},
			    data: {
					page : pageNo,
					per_num: pageSize,
			    },
			    success(res) {
			       const result = res.data.data.list
				   console.log(result)
			       that.$refs.paging.complete(result);
			    },
			});
        },
    },
};
</script>
<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.signList {
    ::v-deep.u-line {
        height: auto !important;
    }

    position: relative;
}
.userName{
	font-size: 32rpx;
	color: #333333;
	margin-right: 16rpx;
}

.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    border-radius: 60rpx 60rpx 0rpx 0rpx;
    background-color: #fff;

    .item {
        width: 100%;
        height: auto;
        box-shadow: 0 0 12upx 2upx rgba(0, 0, 0, 0.08);
        margin-bottom: 40upx;

        .topMessage {
            padding:0 20upx;
            // border-bottom: 1px solid #dddadf;
            text-align: center;
        }

        .statusBg {
            width: 121rpx;
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;
            text-align: center;
            background-size: cover;
        }

        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
            background-color: #fff;
        }

        .timeBox {
            margin-left: 120rpx;
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );

    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
</style>
